<template>
	<div>
		<div v-if="ishow" class="userbox">
			<img class="img" :src="url+userinfo.userimg" alt="">
			<span>{{userinfo.nickname}}</span>
			<div class="drop">
				<button>btn</button>  <br>
				<router-link to="/userinfo">个人中心</router-link>
				<button @click="loginout">退出登录</button><br>
			</div>
		</div>
		<div v-else>
			<router-link to="/login">登录</router-link>
		</div>
	</div>
</template>

<script setup>
	import {onMounted,getCurrentInstance,ref,reactive} from "vue"
	let {proxy:{axios,url}}=getCurrentInstance()
	let ishow=ref(false)
	let userinfo=reactive({})
	onMounted(async ()=>{
		let res=await axios.get("/api/userinfo")
		// let res={}//假数据
		console.log(res)
		if(res.data.code==4004){
			ishow.value=false
		}
		else if(res.data.code==2009){
			ishow.value=true
			userinfo.userimg=res.data.info.userimg
			userinfo.nickname=res.data.info.nickname
		}
	})
	let loginout= async()=>{
		let res=await axios.get("/api/loginout")
		if(res.data.code==2001){
			ishow.value=false
			window.localStorage.setItem("islogin","")
		}
	}
</script>

<style scoped>
	.img{
		width: 60px;
		height: 60px;
	}
	.userbox{
		height: 70px;
		background-color: rebeccapurple;
		overflow: hidden;
	}
	.drop{
		background-color: darkcyan;
	}
	.userbox:hover{
		overflow: visible;
	}
</style>